<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用Proxy实现双向数据绑定（含数组）</title>
	</head>
	<body>
		
		<script>
			//Object.defineProperty在数组监控方面的不足
			let data = {
				list: []
			}
			Object.keys(data).forEach(function (key) {
				let value = data[key];
				Object.defineProperty(data, key, {
					enumerable: true,
					configurable: true,
					get() {
						return value;
					},
					set(newValue) {
						console.log(`Setting`);
						value = newValue;
						return true;
					}
				})
			})

			//data.list.push(1);                 //--->  A
			data.list = [1, 2, 3];          //--->  B
			console.log(data.list);
			/**
			 * 当监控 数组 数据对象的时候，实质上就是监控数组的地址，地址不变也就不会被监测到，所以我们向list里 push 元素的时候并没有触发打印；
			 * 当我们直接替换list 对象的时候就触发了打印。所以这就是Object.defineProperty在数组监控方面的不足。
			 **/
		</script>
		
		<script>
			/**
			 * Proxy 意为 代理，通俗来说就是在 目标数据对象 外围设置一层 拦截。
			 * 举个形象的栗子：有一个仓库，一开始大家可以任意得存放货物，
			 * 后来老板请了一个仓库管家，所有人想要存放货物的必须要经过管家的手。
			 * 而且老板还给管家制定了一套管理标准，管家对仓库的管理必须严格按照这套标准。
			 * 
			 * 仓库 --- data
			 * 仓库管家 --- Proxy / dataProxy
			 * 管理标准 --- {set(),get()}
			 **/
			let vm = {
				list: []
			}
			 
			let vmProxy = new Proxy(vm.list, {
				set(target, prop, value) {
					console.log(`Setting: ${value}`);
					Reflect.set(target, prop, value);
					return true
				}
			})
			vmProxy.push(1);
			// vmProxy.list = [1, 2, 3, 4];
			console.log(Array.from(vmProxy))

			
			
		</script>
		
		
	</body>
</html>
